<template>
  <div>
    <h1>55555</h1>
    <div class="father">
      <div class="child">提醒三个</div>
      <div class="child2">而遇到过</div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
@maincolor: #235830;
h1 {
  background: @maincolor;
  //嵌套
  // $代表的是紧邻的上一层元素
}
.father {
  // div:nth-child(1){
  //   color: yellow;
  // }
  .child {
    color: aqua;
    font-size: 60px;
  }
  .child2 {
    color: burlywood;
    font-size: 60px;
  }
  div:nth-child(1) {
    color: burlywood;
    font-size: 60px;
  }
  & > :nth-child(2) {
    color: red;
    font-size: 60px;
    width: @white;
    height: @white;
    background-color: @maincolor;
  }
}
</style> 